<script setup lang="ts">
import { ref, shallowRef, nextTick } from 'vue'
import { ElMessage as message } from 'element-plus'
import { useTableMixin } from '@/hooks/useTableMixin'
import Add from './add.vue'
import Update from './update.vue'
import GiveAuth from './giveAuth.vue'
import { actionKeys } from '@/common/config'
import { getRolePageApi, deleteRoleApi, getSuccessStatus } from '@/api/role'
import { getRolesInfoApi } from '@/api/user'

// 小于8列不建议每列都写列宽，写了可能导致撑不满布局100%。不写列宽表示自适应，自动补填剩余空间
const columns = shallowRef<TableColConfig[]>([
	{
		label: '复选框列',
		prop: 'selection',
		columnKey: 'selection',
		type: 'selection',
		// width: 55,
		fixed: 'left',
		align: 'center',
	},
	{
		label: '角色名',
		prop: 'roleName',
		columnKey: 'roleName',
		// width: 120,
		align: 'center',
	},
	{
		label: '角色编码',
		prop: 'roleCode',
		columnKey: 'roleCode',
		// width: 120,
		align: 'center',
	},
	{
		label: '描述',
		prop: 'description',
		columnKey: 'description',
		// width: 120,
		align: 'center',
	},
	{
		label: '操作',
		prop: 'operation',
		columnKey: 'operation',
		fixed: 'right',
		resizable: false,
		align: 'center',
		// width: 125,
	},
])

const giveAuthDialogVisible = ref(false)
const giveAuthDialogIsFull = ref(false)
const giveAuthRef = ref()
const noOperateIds=[1]
const isDisabled=(item:any)=>noOperateIds.includes(item.id)

const searchOptions = ref<SearchOptionType[]>([
	{ type: 'input', id: 'roleName', props: { label: '角色名' } },
	{ type: 'input', id: 'roleCode', props: { label: '角色编码' } },
	{ type: 'input', id: 'description', props: { label: '描述' } },
])

const {
	basicPaginationConfig, // 表格分页基础配置
	current, // 当前页码
	size, // 页尺寸
	total, // 总条数
	addRef, // 新增组件ref
	updateRef, // 更新组件ref
	detailRef, // 详情组件ref
	filterOptions, // 查询条件
	getData, // 获取页数据的方法
	tableHeight, // 表格高度
	addDialogVisible, //新增对话框显示隐藏状态
	updateDialogVisible, //更新对话框显示隐藏状态
	tableList, // 表格数据
	selectedRows, // 选中行数据
	editRow, // 当前编辑数据
	addDialogIsFull, // 新增对话框是否全屏的状态
	updateDialogIsFull, // 更新对话框是否全屏的状态
	detailDialogIsFull, // 详情对话框是否全屏的状态
	fixedColWidth, // 固定列列宽
	handleSearchPanelcollapsed, //search-panel组件的 @collapsed 的处理函数
	handleSearch, // 搜索处理函数
	handleReset, // 重置表格数据处理函数
	handlePaginationChange, // 处理分页器变化处理函数
	handleColumnsChange, // 表头变化组件的处理函数
	handleAdd, // 点击新增按钮回调
	handleUpdate, // 点击更新按钮回调
	handleDelete, // 删除处理函数
	handleSelectedRowChange, // 表格选中行变化的回调
	handleImport, // 导入表格处理函数
	handleExport, // 导出表格数据处理函数
	handleAddCommit, // 新增提交
	handleUpdateCommit, // 更新提交
} = useTableMixin<RoleType>({
	columns,
	listApiFunc: getRolePageApi,
	deleteApiFunc: deleteRoleApi,
	actionList: [actionKeys.update, actionKeys.giveAuth, actionKeys.delete],
	query_after: () => {},
	search_after: () => {},
})

function handleGiveAth(row: RoleType) {
	editRow.value = row
	giveAuthDialogVisible.value = true
	nextTick(() => {
		giveAuthRef.value.init()
	})
}

async function handleGiveAuthCommit() {
	const isSuccess = await giveAuthRef.value!.formCommit()
	if (isSuccess) {
		giveAuthDialogVisible.value = false
		message.success('授权成功')
		const res = await getRolesInfoApi()
		if (res.code == getSuccessStatus()) {
			res.data.forEach((v: RoleType) => {
				if (v.id == editRow.value.id) message.info('您当前登录的用户权限有变更，请重新登录刷新权限')
			})
		}
	}
}
</script>

<template>
	<div class="roleManage">
		<search-panel @collapsed="handleSearchPanelcollapsed" @search="handleSearch" @reset="handleReset" :options="searchOptions" />
		<div class="my-table-tool">
			<div class="tool-left">
				<el-button type="primary" style="margin-right: 5px" @click="handleExport" v-if="$hasAuth([actionKeys.export])">导出excel</el-button>
			</div>
			<div class="tool-right">
				<el-button type="primary" style="margin-right: 5px" @click="handleAdd" v-if="$hasAuth([actionKeys.add])">新增角色</el-button>
			</div>
		</div>

		<my-table
			ref="tableRef"
			border
			stripe
			:data="tableList"
			:columns="columns"
			style="width: 100%"
			class="myTable"
			rowKey="id"
			:maxHeight="tableHeight"
			@selection-change="handleSelectedRowChange"
			:pagination="{ ...basicPaginationConfig, current, size, total }"
		>
			<template #operation="{ row }">
				<el-button :disabled="isDisabled(row)" type="primary" size="small" @click="handleUpdate(row)" v-if="$hasAuth([actionKeys.update])">修改</el-button>
				<el-button type="primary" size="small" @click="handleGiveAth(row)" v-if="$hasAuth([actionKeys.giveAuth])">授权</el-button>
				<el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)" v-if="$hasAuth([actionKeys.delete])">
					<template #reference>
						<el-button :disabled="isDisabled(row)" type="danger" size="small">删除</el-button>
					</template>
				</el-popconfirm>
			</template>
		</my-table>

		<el-dialog v-model="addDialogVisible" title="新增角色" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center>
			<el-scrollbar :maxHeight="$getDialogBodyMaxHeight()">
				<div style="padding: 0 10px">
					<Add ref="addRef" />
				</div>
			</el-scrollbar>
			<template #footer>
				<div class="dialog-footer" style="display: flex; justify-content: flex-end">
					<el-button @click="addDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleAddCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="updateDialogVisible" title="更新角色" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center :fullscreen="updateDialogIsFull">
			<el-scrollbar :maxHeight="updateDialogIsFull ? 0 : $getDialogBodyMaxHeight()">
				<div style="padding: 0 10px">
					<Update :editRow="editRow" ref="updateRef" />
				</div>
			</el-scrollbar>
			<template #footer>
				<div class="dialog-footer" style="display: flex; justify-content: flex-end">
					<el-button @click="updateDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleUpdateCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="giveAuthDialogVisible" title="角色授权" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center :fullscreen="giveAuthDialogIsFull">
			<el-scrollbar :maxHeight="giveAuthDialogIsFull ? 0 : $getDialogBodyMaxHeight()">
				<div style="padding: 0 10px">
					<GiveAuth :editRole="editRow" ref="giveAuthRef" />
				</div>
			</el-scrollbar>
			<template #footer>
				<div class="dialog-footer" style="display: flex; justify-content: flex-end">
					<screen-full-toggle-icon @toggle="(v:boolean)=>{giveAuthDialogIsFull=v}" />
					<el-button @click="giveAuthDialogVisible = false">取消</el-button>
					<el-button type="primary" :disabled="isDisabled(editRow)" @click="handleGiveAuthCommit">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<style scoped lang="scss"></style>
